<template>
	<div>

	<!-- 头部 -->
	<MyHeader :title="'tab-bar'"
	></MyHeader>

	<!-- 中间切换 -->
	<div class="main">
		<keep-alive>
				<component :is="comName"
				></component>
		</keep-alive>
	</div>

	<!-- 底部tab -->
	<MyTabBar	:arr="tabList"
						@changCom="changeFn"
	></MyTabBar>

	</div>
</template>

<script>

import MyHeader from './components/MyHeader.vue'
import MyTabBar from './components/MyTabBar.vue'

import '@/assets/fonts/iconfont.css'

//切换
import MyGoodsList from '@/views/MyGoodsList.vue'
import MyGoodsSearch from './views/MyGoodsSearch.vue'
import MyUserInfo from './views/MyUserInfo.vue'

	export default {
		components: {
			MyHeader,
			MyTabBar,
			MyGoodsList,
			MyGoodsSearch,
			MyUserInfo,
		},
		data() {
			return {
				comName: 'MyGoodsList',
				tabList: [ // 底部导航的数据
					{
						iconText: "icon-shangpinliebiao",
						text: "商品列表",
						componentName: "MyGoodsList",
					},
					{
						iconText: "icon-sousuo",
						text: "商品搜索",
						componentName: "MyGoodsSearch",
					},
					{
						iconText: "icon-user",
						text: "我的信息",
						componentName: "MyUserInfo",
					},
				],
			};
		},
		
		methods: {
			changeFn(comName){
				this.comName = comName
			},
		}
	};
</script>

<style scoped>
	.main {
		padding-top: 45px;
		padding-bottom: 51px;
	}
</style>
